<template>
  <div class="contaienr">
    <transition-group tag="ul" name="list" class="list">
      <li class="list-item" v-for="(item,index) in items" :key="item.name" @click="delItem(index)">{{item.name}}</li>
    </transition-group>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        items: [{
          name: '王1',
          age: 30
        }, {
          name: '王2',
          age: 30
        }, {
          name: '王3',
          age: 30
        }, {
          name: '王4',
          age: 30
        }, {
          name: '王5',
          age: 30
        }, {
          name: '王6',
          age: 30
        }, {
          name: '王7',
          age: 30
        }, {
          name: '王8',
          age: 30
        }, {
          name: '王9',
          age: 30
        }, {
          name: '王二',
          age: 30
        }]
      }
    },
    methods: {
      delItem(index){
        this.items.splice(index, 1)
      },
    },
    head: {
      title: "列表"
    }
  }
</script>
<style lang="scss" scoped>
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }

  .list-enter, .list-leave-to
    /* .list-leave-active for below version 2.1.8 */
  {
    opacity: 0;
    transform: translateY(30px);
  }

  .container {
    width: 1366px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    .list {
      list-style: none;
      padding: 0;
      border: 1px solid #ddd;
      .list-item {
        height: 48px;
        line-height: 48px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        margin: -1px 0;
      }
    }
  }
</style>
